import { type EChartsOption, graphic } from 'echarts'
import type { Ref } from 'vue'

import { formatUnix } from '@/utils'
import { colors } from '../config'
import { hexColorToRgb } from '../utils'

export interface HookOptions {
  title?: string
  width?: number | string
  colors?: string[]
  barMaxWidth?: number
  dataAxis: Ref<string[] | number[]> | string[] | number[]
  dataSource: number[] | string[]
  YType?: string
  XType?: string
  gridBottom?: number
  gridTop?: number
  isLinear?: boolean
  emphasisColor?: string[]
  labelFormatter?: (value: any) => string
  valueFormatter?: (value: any) => string
}

// 坐标轴文字颜色
const axisLabelColor = '#A6ADB8'
// 边框颜色
const axisBorderColor = '#DFE2E5'

function getLinearGradient(color: string) {
  const rgb = hexColorToRgb(color)

  return new graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.06)` },
    { offset: 1, color: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.16)` }
  ])
}
const defaultOpt = {
  width: 'auto',
  colors: [...colors],
  YType: 'value',
  XType: 'category',
  gridBottom: 0,
  gridTop: 60,
  isLinear: true,
  emphasisColor: [...colors],
  dataAxis: [],
  dataSource: []
}
export default function useBarCharts(options: HookOptions) {
  options = { ...defaultOpt, ...options }
  const chartsOptions = computed(() => {
    return {
      grid: {
        width: options.width,
        left: options.isLinear ? 'center' : 0,
        top: options.gridTop,
        bottom: options?.gridBottom,
        containLabel: true
      },
      tooltip: {
        borderColor: '#fff',
        formatter(params: any) {
          return `
            <div class="line-tooltip">
             <div class="time">${
               options.YType !== 'category'
                 ? formatUnix(Number(params.name))
                 : params.name
             }</div>
              <div class="series-item">
                <div style="border-color: ${options.colors?.[0]}"></div>
                <div class="name">${options.title || ''}</div>
                <div class="value">
                  ${
                    options.labelFormatter
                      ? options.labelFormatter(params.value) + '¥'
                      : params.value
                  }
                </div>
              </div>
            </div>
          `
        }
      },
      xAxis: {
        data: options.XType === 'category' ? options.dataAxis : [],
        type: options.XType,
        axisTick: { show: false },
        axisLabel: {
          show: !!options.labelFormatter,
          color: axisLabelColor,
          margin: 16,
          formatter: (val: any) => {
            if (options.labelFormatter) {
              return options.labelFormatter(val)
            }
            return val
          }
        },

        splitLine: {
          show: !!options.labelFormatter,
          lineStyle: {
            type: 'dashed',
            color: axisBorderColor
          }
        }
      },
      yAxis: {
        type: options.YType,
        data: options.XType === 'value' ? options.dataAxis : null,
        axisLabel: {
          show: !!options.valueFormatter,
          color: axisLabelColor,
          margin: 16,
          formatter: (val: any) => {
            if (options.valueFormatter) {
              return options.valueFormatter(val)
            }
            return val
          }
        },
        axisLine: {
          show: !!options.labelFormatter,
          lineStyle: {
            type: 'solid',
            color: axisBorderColor
          }
        },
        splitLine: {
          show: false
        }
      },
      series: [
        {
          type: 'bar',
          showBackground: false,
          barMaxWidth: options.barMaxWidth,
          barMinHeight: 0,
          itemStyle: {
            color: options.isLinear
              ? getLinearGradient(options.colors![0])
              : options.colors![0]
          },
          emphasis: {
            itemStyle: {
              color: options.emphasisColor![0]
            }
          },
          data: options.dataSource
        }
      ]
    } as EChartsOption
  })

  return {
    options: chartsOptions
  }
}
